<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <child-b></child-b>
    </div>
    <script src='./vue.js'></script>
    <script>
        // 1. 声明变量 var a;
        // 2. 赋值 a = 20;
        // 3. 使用变量 console.log(a);

        Vue.component('child-a', {
            // 选项
            template: `<div>{{title}}</div>`,
            props: ['title'],
            data() {
                return {
                    // title: 'abc'
                }
            }
        });

        Vue.component('child-b', {
            // 选项
            template: `<div>aaaaaa------<child-a></child-a></div>`,
        });

        // 根实例(根组件)
        new Vue({
            el: '#app',
            data: {
                msg: '随便写'
            },
            methods: {

            }
        })
    </script>
</body>

</html>

    

<!-- 
1. 组件
1.1 特点
- 组件是封装
- 封装html css js
- 多次复用
- 组件是特殊的Vue实例
- 有自己的选项 比如 template
- 也能使用Vue实例原来的选项 data methods 等
- 每用一次组件 就相当于new了一个新实例
- 每个组件有自己的独立作用域
- 补充: 实际开发中,尽可能用第三方组件
1.2 
分类:全局和局部
步骤: 1.定义组件 2. 设置选项 3.使用组件

2.SPA
Vue适合开发SPA
SPA特点 好:操作刘畅,完全组件化 坏:首屏加载慢 不利于SEO 开发难度高
SPA原理: 前后端分离+前端路由
补: js实现路由
a. hash # 
b. history HTML5新特性 url美观

vue中的路由 
3. 路由
插件: vue-router
a. 视图中 链接 router-link to="/A"
b. 视图中 容器(路由出口) router-view
c. js中 提供要显示的各个组件
d. js中 获取router = newVueRouter({})
e. js中 配置路由 routes:[{path:'/A',component:Acom},{}...]
f. newVue中挂载路由 选项: router
-->